<template>
  <div class="sz-demo sz-demo-upload">
    <h2>基本用法</h2>
    <!-- 上传文件 -->
    <template>
      <el-divider content-position="left"><b>上传文件</b></el-divider>
      <section>
        <sz-upload
          platform="zyk"
          tip="测试分段上传"
          basePath="resources/web/zyk/12225542/"
          copied
          :initFiles="initFiles"
          @checkFile="checkFile"
          @getFile="handleGetFile"
          @removeFile="handleRemove"
        >
        </sz-upload>
      </section>
    </template>

    <!-- 用户头像上传 -->
    <template>
      <el-divider content-position="left"><b>上传头像、封面</b></el-divider>
      <section>
        <sz-upload
          platform="zyk"
          tip="只能上传jpg/png文件，且不超过500kb"
          basePath="resources/web/zyk/12225542/"
          type="avatar"
          :initFiles="initFiles"
          :obsOptions="{ uptokenHost: 'https://zykapi.tongshike.cn' }"
          @checkFile="checkFile"
          @getFile="handleGetFile"
          @removeFile="handleRemove"
        />
      </section>
    </template>

    <!-- 拖拽上传 -->
    <template>
      <el-divider content-position="left"><b>拖拽上传</b></el-divider>
      <section>
        <sz-upload
          platform="zyk"
          tip="只能上传jpg/png文件，且不超过500kb"
          basePath="resources/web/zyk/12225542/"
          type="drag"
          :initFiles="initFiles"
          @checkFile="checkFile"
          @getFile="handleGetFile"
          @removeFile="handleRemove"
        />
      </section>
    </template>

    <!-- 分步上传 -->
    <template>
      <el-divider content-position="left"><b>分步上传</b></el-divider>
      <section>
        <sz-step-upload
          platform="zyk"
          basePath="resources/web/zyk/12225542/"
          @getFile="handleGetFile"
        >
          <template slot="action">
            <div>
              <el-button size="small" type="success" style="margin-bottom: 10px;">上传优学院课程资源导入信息</el-button>
              <el-button size="small" type="primary" style="width: 100%;margin-left: 0;">上传内部资源导入信息</el-button>
            </div>
          </template>
        </sz-step-upload>
      </section>
    </template>

    <h2>高级用法</h2>
    <!-- 手动上传 -->
    <template>
      <el-divider content-position="left"><b>手动上传</b></el-divider>
      <section>
        <el-form
          :model="fileForm"
          ref="fileForm"
          :rules="fileRules"
          label-width="100px"
        >
          <el-form-item label="选择文件" prop="files" class="is-required">
            <sz-upload
              v-model="fileForm.files"
              ref="szUpload"
              platform="zyk"
              tip="只能上传jpg/png文件，且不超过500kb"
              basePath="resources/web/zyk/12225542/"
              type="drag"
              :auto-upload="false"
              @checkFile="checkFile"
              @getFileList="handleGetFileList"
              @removeFile="handleRemove"
            />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-input v-model="fileForm.type"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="!uploaded">提交</el-button>
          </el-form-item>
        </el-form>
      </section>
    </template>

    <!-- 本地部署 -->
    <template>
      <el-divider content-position="left"><b>本地部署</b></el-divider>
      <section>
        <sz-upload
          platform="sjjx"
          tip="只能上传jpg/png文件，且不超过500kb"
          type="avatar"
          strategy="local"
          action="https://sjjxapi.tongshike.cn/uploadToken"
          :headers="{ Authorization: '83784DD8CB2BC10866A9266784132F4C' }"
          basePath="/sjjx/123456"
          multiple
          @checkFile="checkFile"
          @getFile="handleGetFile"
          @removeFile="handleRemove"
        />
      </section>
    </template>

    <!-- 自定义上传样式 -->
    <template>
      <el-divider content-position="left"><b>自定义上传样式</b></el-divider>
      <section>
        <sz-upload
          platform="zyk"
          :show-file-list="false"
          @getFile="handleGetAvatar"
        >
          <el-avatar
            icon="el-icon-user-solid"
            :size="50"
            :src="avatar"
          ></el-avatar>
        </sz-upload>
      </section>
    </template>
  </div>
</template>

<script>
import { PLATFORM_API } from "@/plugins/config.js";
import { SzUpload, SzStepUpload } from "@/components";
export default {
  name: "SzUploadDemo",
  components: { SzUpload, SzStepUpload },
  data() {
    const checkFile = (rule, value, callback) => {
      if (!this.fileForm.files || !this.fileForm.files.length) {
        return callback(new Error("请选择文件！"));
      }
      callback();
    };
    return {
      PLATFORM_API,
      initFiles: [],

      // 手动上传变量
      fileForm: {},
      fileRules: {
        files: [
          { validator: checkFile, message: "请选取文件", trigger: "change" }
        ],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }]
      },
      uploaded: true,
      avatar: ""
    };
  },
  methods: {
    checkFile(file, callback) {
      if (file.size > 1 * 1024 * 1024 * 1024) {
        this.$message({ type: "error", message: "文件大小不能超过1G" });
        callback(false);
      } else {
        callback(true);
      }
    },
    handleRemove(file, fileList) {
      console.log("删除文件啦", file);
    },
    handleGetFile(file, error) {
      console.log("当前文件状态", file, error);
    },
    handleGetAvatar(file) {
      this.avatar = file.url;
    },
    handleGetFileList(list) {
      this.fileForm.files = list;
      this.$refs.fileForm.validateField("files");
      if (!this.uploaded) {
        this.uploaded = this.fileForm.files.every(f => f.status === 'success');
      }
    },
    submitForm() {
      this.$refs.fileForm.validate(async (valid) => {
        if (!valid) return;
        this.uploaded = false;
        const readyFiles = this.fileForm.files.filter(f => f.status === 'ready');
        if (readyFiles && readyFiles.length) {
          await readyFiles.forEach(file => this.$refs.szUpload.handleUpload({ file }));
        }
        this.uploaded = true;
      });
    }
  },
  mounted() {
    setTimeout(() => {
      this.initFiles = [
        {
          url: "https://tobs.ulearning.cn/resources/web/zyk/12225542/1721301696886.webp",
          name: "test"
        }
      ];
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.sz-demo-upload {
  section {
    border: 1px solid #f0f2f5;
  }
}
</style>
